<template>
  <div>

    <el-form-item>
      <el-button type="primary" @click="addDomain">添加</el-button>
    </el-form-item>

    <el-form-item
      v-for="(domain, index) in dynamicValidateForm.domains"
      :key="domain.key"
      :prop="'domains.' + index + '.value'"
    >
      <el-row :gutter="12" class="fill-width flex-fill">
        <el-col :span="12" class="fill-width flex-fill">
          <el-input placeholder="名称" class="fill-width flex-fill" v-model="domain.label"></el-input>
        </el-col>
        <el-col :span="12" class="fill-width flex-fill">
          <el-input placeholder="编码" class="fill-width flex-fill" v-model="domain.value">
            <template #append>
              <el-button type="danger" @click.prevent="removeDomain(domain)">删除</el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
    </el-form-item>

  </div>
</template>

<script setup lang="ts">
import { SettingType } from "~/api/system/company/types";
import { onMounted, reactive, watch } from "vue";

interface Props {
  form: SettingType;
}

const { form} = withDefaults(defineProps<Props>(), {});

let dynamicValidateForm = reactive<{
  domains: any[]
}>({
  domains: [
    {
      label: "",
      value: "",
    },
  ],
});

const removeDomain = (item: any) => {
  const index = dynamicValidateForm.domains.indexOf(item);
  if (index !== -1) {
    dynamicValidateForm.domains.splice(index, 1);
  }
};

const addDomain = () => {
  dynamicValidateForm.domains.push({
    key: Date.now(),
    value: "",
  });
};

onMounted(()=>{
  dynamicValidateForm.domains = form.samplePlace
})
watch(dynamicValidateForm.domains,value => {
  form.samplePlace = value
})
</script>

<style scoped lang="scss">

</style>
